import React from 'react';
import { Row, Col, Card, Icon, Tag } from 'antd';
import styles from './styles.less';

const HrOverflow = ({ data = {} }) => {
    /**
     * 百分比计算
     * @param {*} number 要计算的数
     * @param {*} total 总数
     */
    const Percentage = (number, total) => `${Math.round((number / total) * 10000) / 100.0}%`;

    // 初始化6个数字，如果为null全改为0，优化显示
    const companyTotal = data.companyPeopleNum || 0;
    const companyNum = data.lastCycleCompanyPeopleNum || 0;
    const yearCompleted = data.yearCompletedRecruiterNum || 0;
    const yearPlan = data.yearPlanRecruiterNum || 0;
    const leaveNum = data.leavePeopleNum || 0;
    const entryNum = data.entryPeopleNum || 0;

    // 上升1，下降0，不变2
    let UpOrDown;
    // 较上周上升/下降百分比
    let PercentageNum;
    if (companyNum > 0) {
        if (companyTotal > companyNum) {
            // 上升
            PercentageNum = Percentage(companyTotal - companyNum, companyNum);
            UpOrDown = 1;
        } else if (companyTotal < companyNum) {
            // 下降了
            PercentageNum = Percentage(companyNum - companyTotal, companyNum);
            UpOrDown = 0;
        } else {
            UpOrDown = 2;
        }
    } else {
        PercentageNum = '--';
        UpOrDown = 3;
    }

    // 年度招聘目标已完成百分比
    const PercentageRecruit = yearCompleted === 0 && yearPlan === 0 ? '0%' : Percentage(yearCompleted, yearPlan);
    return (
        <Card title="概览" bordered={false} style={{ height: '220px' }}>
            <Row type="flex" className={styles.overflowRow}>
                <Col span={6} style={{ position: 'relative' }}>
                    <h5>人员总数</h5>
                    <div>
                        <span className={styles.number}>{companyTotal}</span>人
                    </div>
                    {UpOrDown === 1 || UpOrDown === 0 ? (
                        <p className={styles.percentage}>
                            较上周{' '}
                            <Icon
                                type={UpOrDown === 1 ? 'caret-up' : 'caret-down'}
                                style={{ color: '#FFA808', fontSize: '14px' }}
                            />
                            <span>{PercentageNum}</span>
                        </p>
                    ) : (
                        <p className={styles.percentage}>
                            较上周 <span>{UpOrDown === 3 ? PercentageNum : '无变化'}</span>
                        </p>
                    )}
                </Col>
                <Col span={6}>
                    <p className={styles.line}></p>
                    <h5>年度招聘目标</h5>
                    <div>
                        <span className={styles.number}>{yearPlan}</span>人
                    </div>
                    <p className={styles.percentage}>
                        已完成 <span>{PercentageRecruit}</span>
                    </p>
                </Col>
                <Col span={6} className={styles.flow}>
                    <p className={styles.line}></p>
                    <h5>人员流动</h5>
                    <div>
                        上周入职：
                        <Tag color="orange">
                            {entryNum === 0 ? '' : '+'}
                            {entryNum}
                        </Tag>
                    </div>
                    <div>
                        上周离职：
                        <Tag color="green">
                            {leaveNum === 0 ? '' : '-'}
                            {leaveNum}
                        </Tag>
                    </div>
                </Col>
                <Col span={6}>
                    <p className={styles.line}></p>
                    <h5>薪资规划</h5>
                    <div style={{ fontSize: '12px' }}>待添加</div>
                </Col>
            </Row>
        </Card>
    );
};

export default HrOverflow;
